import Image from "next/image"
import Link from "next/link"
import { ChevronRight } from "lucide-react"
import { PlaylistGrid } from "@/components/playlist/playlist-grid"
import { MVGrid } from "@/components/mv/mv-grid"
import { AlbumGrid } from "@/components/album/album-grid"
import { NewSongsSection } from "@/components/song/new-songs-section"
import { RankingPreview } from "@/components/ranking/ranking-preview"

export default function HomePage() {
  return (
    <div className="min-h-screen">
      <div className="container mx-auto px-4 py-8">
        {/* 轮播图 */}
        <div className="mb-12">
          <div className="relative aspect-[21/9] rounded-lg overflow-hidden">
            <Image
              src="/placeholder.svg"
              alt="Featured content"
              layout="fill"
              objectFit="cover"
              className="transition-transform hover:scale-105 duration-300"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
            <div className="absolute bottom-6 left-6 right-6">
              <h2 className="text-2xl font-bold text-white mb-2">热门新歌首发</h2>
              <p className="text-white/80">探索本周最火热的新曲</p>
            </div>
          </div>
        </div>

        {/* 推荐歌单 */}
        <section className="mb-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">推荐歌单</h2>
            <Link href="/playlists" className="text-sm text-muted-foreground hover:text-primary flex items-center">
              更多 <ChevronRight className="h-4 w-4 ml-1" />
            </Link>
          </div>
          <PlaylistGrid selectedCategory={null} />
        </section>

        {/* 新歌首发 */}
        <section className="mb-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">新歌首发</h2>
            <Link href="/new" className="text-sm text-muted-foreground hover:text-primary flex items-center">
              更多 <ChevronRight className="h-4 w-4 ml-1" />
            </Link>
          </div>
          <NewSongsSection />
        </section>

        {/* 排行榜 */}
        <section className="mb-12">
          <RankingPreview />
        </section>
        {/* 新碟上架 */}
        <section className="mb-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">新碟上架</h2>
            <Link href="/new" className="text-sm text-muted-foreground hover:text-primary flex items-center">
              更多 <ChevronRight className="h-4 w-4 ml-1" />
            </Link>
          </div>
          <AlbumGrid region="全部" limit={5} />
        </section>

        {/* MV推荐 */}
        <section className="mb-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">精选MV</h2>
            <Link href="/mv" className="text-sm text-muted-foreground hover:text-primary flex items-center">
              更多 <ChevronRight className="h-4 w-4 ml-1" />
            </Link>
          </div>
          <MVGrid region="全部" version="全部" sortBy="最新" limit={4} />
        </section>
      </div>
    </div>
  )
}

